import React, { Component } from 'react'
import { Button, Col, Form, Row } from 'antd'
import { FormComponentProps } from 'antd/es/form'
import {resultComponent}  from '../../common/formComponent'
import { FormProps, FormItemProps } from 'antd/lib/form'

export interface IFormItem {
    type: string,
    formItem: FormItemProps,
    filedDecorator: any,
    component: any,
    name: string
}

interface IProps extends FormComponentProps {
    formProps:FormProps,
    items: IFormItem[]
 }

export default class BaseForm extends Component<IProps>{
    public getFormItemComponent(type: string) {
        if(typeof type === 'string'){
            return resultComponent(type)
        }
    }
    public resetFields() {
        this.props.form.resetFields()
    }
    public getFeildValue(type:any) {
        if(type !== "") {
            console.log(this.props.form.getFieldValue(type))
        }
        
    }
    public renderFormItem(item: IFormItem, ComponentFormItem: any,index:number) {
        return (
            <Col key={index} span={8}>
            <Form.Item key={index} labelCol={{span: 8}} {...item.formItem}>
                <ComponentFormItem></ComponentFormItem>
            </Form.Item>
            </Col>
        )
    }
    public renderFormItemComponent(item: IFormItem, index: number) {
        const { getFieldDecorator }  = this.props.form
        const {type, component, filedDecorator, name} = item
        const FormItemComponent = this.getFormItemComponent(type)
        return getFieldDecorator(name,filedDecorator)(<FormItemComponent {...component}></FormItemComponent>)
    }
    public renderButton() {
        return (
            <Form.Item>
                <Button type='primary' onClick={() => this.resetFields()}>重置</Button>
                <Button type='primary' onClick={() => this.getFeildValue('left')}>查询</Button>
            </Form.Item>
        )
    }
    public renderForm() {
        const { items,formProps } = this.props
        return(
            <Form {...formProps} style={{marginTop:'100px',marginLeft:'300px'}}>
                <Row>
                {items.map((item: IFormItem, index: number) => {
                    return (
                        this.renderFormItem(item,this.renderFormItemComponent(item,index),index)
                    )
                })}
                </Row>
                {this.renderButton()}
            </Form>
        )
    }
    public render(){
        return (
            this.renderForm()
        )
    }
}